<template>
  <div class="pie">
    <div class="one">
      <p>基本饼图</p>
      <div id="pie-one" />
    </div>
    <div class="two">
      <p>南丁格尔玫瑰图</p>
      <div id="pie-two"></div>
    </div>
    <div class="three">
      <p>可滚动的图例</p>
      <div id="pie-three"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    // 圆角环形图
    this.pieOne()
    // 南丁格尔玫瑰图
    this.getTwo()
    // 可滚动的图例
    this.getThree()
  },
  methods: {
    // 调用圆角环形图
    pieOne() {
      var chartDom = document.getElementById('pie-one')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    },
    // 南丁格尔玫瑰图
    getTwo() {
      var chartDom = document.getElementById('pie-two');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 可滚动的图例
    getThree(){
      var chartDom = document.getElementById('pie-three');
      var myChart = echarts.init(chartDom);
      var option;
      const data = genData(50);
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: data.legendData
        },
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      function genData(count) {
        // prettier-ignore
        const nameList = [
              '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
          ];
        const legendData = [];
        const seriesData = [];
        for (var i = 0; i < count; i++) {
          var name =
            Math.random() > 0.65
              ? makeWord(4, 1) + '·' + makeWord(3, 0)
              : makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          });
        }
        return {
          legendData: legendData,
          seriesData: seriesData
        };
        function makeWord(max, min) {
          const nameLen = Math.ceil(Math.random() * max + min);
          const name = [];
          for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
          }
          return name.join('');
        }
      }
      option && myChart.setOption(option);
    }
  }

}
</script>

<style lang="scss" scoped>
p {
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.pie {
  width: 100%;
  height: auto;
  .one {
    border: 1px solid #ccc;
    box-sizing: border-box;
    #pie-one {
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .two {
    border: 1px solid #ccc;
    box-sizing: border-box;
    #pie-two {
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .three {
    border: 1px solid #ccc;
    box-sizing: border-box;
    #pie-three {
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
